<!--
使用方法
<date-picker v-model:show="isShow" v-model="date"></date-picker>
-->
<template>
  <van-popup teleport="#app" v-model:show="show" round position="bottom" @click-overlay="dateCancel">
    <van-datetime-picker
        v-model="modelValue"
        :type="selectType"
        :title="selectType == 'datehour' ? '选择时间' : '选择时间'"
        @confirm="dateConfirm"
        @cancel="dateCancel"
        @change="dateChange"
        :minDate="minDate"
        :maxDate="maxDate"
    >
    </van-datetime-picker>
  </van-popup>
</template>
<script>
import {ref, toRefs, reactive, computed, watch, provide, inject} from "vue";
import moment from 'moment';
import {FULL_DATE_FORMAT} from "@/assets/common/js/common";

export default {
  name: "datePicker",
  props: {
    modelValue: {
      default: moment().toDate(),
    },
    show: {
      type: Boolean,
      default: false,
    },
    maxDate: {
      default: moment().toDate(),
    },
    minDate: {
      default: moment().add(-10, 'year').toDate(),
    },
    selectType: {
      default: "datehour",
    },
  },
  emits: ["confirm", "cancel", "update:modelValue", 'update:show'],
  setup(props, {emit}) {
    let state = reactive({
      maxDate: moment(props.maxDate).toDate(),
      dateConfirm(e) {
        emit("update:show", false);
        emit("update:modelValue", e);
        emit("confirm", e);
      },
      dateCancel() {
        emit("update:show", false);
        emit("cancel");
      },
      dateChange(e) {
      },
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style scoped lang="less">
</style>